<template>
    <TemplateTitle titleName="全年完成情况" style="margin-bottom: 25rem;"></TemplateTitle>
    <div class="type-box">
        <div class="type-item">
            <div class="name">
                <span></span>
                <p>全年目标水量(水务)</p>
            </div>
            <div class="numb"><span>{{ dataObj.targetYear }}</span> 万吨</div>
        </div>
        <div class="type-item">
            <div class="name">
                <span></span>
                <p>已完成水量</p>
            </div>
            <div class="numb"><span>{{ dataObj.completeOfYear }}</span> 万吨</div>
        </div>
    </div>
    <div class="type-box">
        <div class="type-item">
            <div class="name">
                <span></span>
                <p>目标日均水量(水务)</p>
            </div>
            <div class="numb"><span>{{ dataObj.targetOfDailyAvg }}</span> 万吨</div>
        </div>
        <div class="type-item">
            <div class="name">
                <span></span>
                <p>实际日均水量</p>
            </div>
            <div class="numb"><span>{{ dataObj.dailyAvgOfYear }}</span> 万吨</div>
        </div>
    </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/TemplateTitle.vue"
import homeHttp from "@/https/home.js"
import { nextTick, onMounted, ref } from "vue"

let dataObj = ref({})

onMounted(() => {
    queryAchievedOfYear()
})

const queryAchievedOfYear = () => {
    homeHttp.queryAchievedOfYear().then(res => {
        if (res.data.code == 200) {
            dataObj.value = res.data.data
        }
    })
}

</script>

<style scoped lang="less">
.type-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .type-item {
        width: 166rem;
        background: url('../../assets/images/typeItemBg.png') no-repeat right bottom;
        background-size: 150rem 15rem;
        margin-bottom: 30rem;

        .name {
            padding-left: 3px;
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #7190b6;
            font-size: 12rem;
            margin-bottom: 10rem;

            span {
                display: inline;
                width: 6rem;
                height: 6rem;
                background-color: #369eff;
                margin-right: 8rem;
            }
        }

        .numb {
            line-height: 32rem;
            color: #369eff;
            font-weight: bold;
            font-size: 16rem;
            padding-left: 16rem;

            span {
                font-size: 24rem;
            }
        }
    }
}
</style>
